<template>
  <div class="rumor-spread-analysis">
    <div class="page-header">
      <div class="header-info">
        <h1>谣言传播分析</h1>
        <p>分析谣言传播模式和传播趋势</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button>
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 传播概览 -->
    <div class="spread-overview">
      <div class="overview-card">
        <h3>📊 传播统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">{{ overview.identifiedRumors }}</div>
            <div class="stat-label">识别谣言数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ overview.interceptRate }}%</div>
            <div class="stat-label">拦截成功率</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ overview.avgResponseTime }}h</div>
            <div class="stat-label">平均响应时间</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ formatNumber(overview.affectedUsers) }}</div>
            <div class="stat-label">影响用户数</div>
          </div>
        </div>
      </div>

      <div class="overview-card">
        <h3>🔥 热门谣言类型</h3>
        <div class="rumor-types">
          <div class="type-item" v-for="type in rumorTypes" :key="type.name">
            <span class="type-name">{{ type.name }}</span>
            <div class="type-progress">
              <div class="progress-bar" :style="{ width: type.percentage + '%' }"></div>
            </div>
            <span class="type-percent">{{ type.percentage }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 传播趋势图 -->
    <div class="trend-charts">
      <div class="chart-card">
        <h3>📈 传播趋势分析</h3>
        <div class="chart-container">
          <div ref="trendChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-card">
        <h3>🌐 传播路径网络图</h3>
        <div class="chart-container">
          <div ref="networkChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 传播地域分布 -->
    <div class="region-charts">
      <div class="chart-card">
        <h3>🗺️ 传播地域分布</h3>
        <div class="chart-container">
          <div ref="regionDistributionChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-card">
        <h3>📱 传播平台分布</h3>
        <div class="chart-container">
          <div ref="platformChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 谣言列表 -->
    <div class="rumor-list">
      <div class="list-header">
        <h3>🚨 最新谣言监控</h3>
        <div class="filter-controls">
          <el-select v-model="filters.status" placeholder="选择状态" style="width: 120px">
            <el-option label="全部" value="all" />
            <el-option label="活跃传播" value="active" />
            <el-option label="已控制" value="contained" />
            <el-option label="已辟谣" value="debunked" />
          </el-select>
          <el-select v-model="filters.type" placeholder="选择类型" style="width: 120px">
            <el-option label="全部" value="all" />
            <el-option label="健康医疗" value="health" />
            <el-option label="社会事件" value="social" />
            <el-option label="科技产品" value="tech" />
          </el-select>
        </div>
      </div>

      <div class="rumor-cards">
        <div v-for="rumor in filteredRumors" :key="rumor.id" class="rumor-card">
          <div class="rumor-header">
            <div class="rumor-title">{{ rumor.title }}</div>
            <div class="rumor-status" :class="rumor.status">
              {{ getStatusText(rumor.status) }}
            </div>
          </div>
          
          <div class="rumor-content">
            <p>{{ rumor.content }}</p>
          </div>

          <div class="rumor-metrics">
            <div class="metric-row">
              <div class="metric-item">
                <span class="metric-label">传播量</span>
                <span class="metric-value">{{ formatNumber(rumor.spreadCount) }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">影响用户</span>
                <span class="metric-value">{{ formatNumber(rumor.affectedUsers) }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">传播速度</span>
                <span class="metric-value">{{ rumor.spreadRate }}/h</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">风险等级</span>
                <span class="metric-value" :class="'risk-' + rumor.riskLevel">{{ getRiskText(rumor.riskLevel) }}</span>
              </div>
            </div>
          </div>

          <div class="rumor-timeline">
            <div class="timeline-item">
              <span class="timeline-time">首次发现：{{ rumor.firstDetected }}</span>
            </div>
            <div class="timeline-item">
              <span class="timeline-time">开始传播：{{ rumor.startedSpreading }}</span>
            </div>
            <div class="timeline-item" v-if="rumor.debunkedAt">
              <span class="timeline-time">辟谣时间：{{ rumor.debunkedAt }}</span>
            </div>
          </div>

          <div class="rumor-actions">
            <el-button size="small" type="primary" @click="viewDetails(rumor)">查看详情</el-button>
            <el-button size="small" @click="trackSpread(rumor)">追踪传播</el-button>
            <el-button size="small" type="warning" @click="createDebunking(rumor)">生成辟谣</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 传播分析报告 -->
    <div class="analysis-report">
      <div class="report-card">
        <h3>📋 传播分析报告</h3>
        <div class="report-content">
          <div class="report-section">
            <h4>传播特征分析</h4>
            <ul>
              <li>健康医疗类谣言传播最为活跃，占比35%</li>
              <li>社交媒体平台是主要传播渠道，占传播量的78%</li>
              <li>晚间19:00-22:00是传播高峰期</li>
              <li>中老年群体更容易受到健康类谣言影响</li>
            </ul>
          </div>

          <div class="report-section">
            <h4>传播模式识别</h4>
            <ul>
              <li>病毒式传播模式：快速指数增长后逐渐衰减</li>
              <li>话题热点驱动：与社会热点事件高度相关</li>
              <li>群体极化现象：特定群体内部强化传播</li>
              <li>权威背书效应：冒用权威机构名义传播</li>
            </ul>
          </div>

          <div class="report-section">
            <h4>防控建议</h4>
            <ul>
              <li>加强预警系统，提升早期识别能力</li>
              <li>建立快速响应机制，缩短辟谣时间</li>
              <li>加强科普宣传，提高公众辨识能力</li>
              <li>与平台合作，建立传播阻断机制</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Refresh } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 图表引用
const trendChart = ref(null)
const networkChart = ref(null)
const regionDistributionChart = ref(null)
const platformChart = ref(null)

// 图表实例
let trendChartInstance = null
let networkChartInstance = null
let regionDistributionChartInstance = null
let platformChartInstance = null

// 概览数据
const overview = reactive({
  identifiedRumors: 1234,
  interceptRate: 85.6,
  avgResponseTime: 2.3,
  affectedUsers: 156000
})

// 谣言类型数据
const rumorTypes = ref([
  { name: '健康医疗', percentage: 35 },
  { name: '社会事件', percentage: 28 },
  { name: '科技产品', percentage: 22 },
  { name: '其他', percentage: 15 }
])

// 筛选条件
const filters = reactive({
  status: 'all',
  type: 'all'
})

// 谣言数据
const rumors = ref([
  {
    id: 1,
    title: '5G基站辐射致癌论',
    content: '传言称5G基站会产生有害辐射，长期使用会导致癌症...',
    status: 'debunked',
    type: 'tech',
    spreadCount: 45678,
    affectedUsers: 123456,
    spreadRate: 156,
    riskLevel: 'high',
    firstDetected: '2024-01-10 09:30',
    startedSpreading: '2024-01-10 10:15',
    debunkedAt: '2024-01-10 15:20'
  },
  {
    id: 2,
    title: '某地区疫情爆发假消息',
    content: '网传某地区爆发新型疫情，政府正在紧急封锁...',
    status: 'active',
    type: 'social',
    spreadCount: 89234,
    affectedUsers: 234567,
    spreadRate: 342,
    riskLevel: 'high',
    firstDetected: '2024-01-15 14:20',
    startedSpreading: '2024-01-15 14:45'
  },
  {
    id: 3,
    title: '某食品添加剂有害健康',
    content: '声称某种常见食品添加剂会导致严重健康问题...',
    status: 'contained',
    type: 'health',
    spreadCount: 23456,
    affectedUsers: 78901,
    spreadRate: 89,
    riskLevel: 'medium',
    firstDetected: '2024-01-12 16:30',
    startedSpreading: '2024-01-12 17:00'
  }
])

// 计算属性
const filteredRumors = computed(() => {
  return rumors.value.filter(rumor => {
    const statusMatch = filters.status === 'all' || rumor.status === filters.status
    const typeMatch = filters.type === 'all' || rumor.type === filters.type
    return statusMatch && typeMatch
  })
})

// 方法
const formatNumber = (number) => {
  if (number >= 1000000) {
    return (number / 1000000).toFixed(1) + 'M'
  } else if (number >= 1000) {
    return (number / 1000).toFixed(1) + 'K'
  }
  return number.toString()
}

const getStatusText = (status) => {
  const statusMap = {
    active: '活跃传播',
    contained: '已控制',
    debunked: '已辟谣'
  }
  return statusMap[status] || status
}

const getRiskText = (level) => {
  const riskMap = {
    low: '低风险',
    medium: '中风险',
    high: '高风险'
  }
  return riskMap[level] || level
}

const refreshData = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    overview.identifiedRumors += Math.floor(Math.random() * 10)
    ElMessage.success('数据刷新成功')
  } catch (error) {
    ElMessage.error('数据刷新失败')
  }
}

const generateReport = () => {
  ElMessage.success('正在生成传播分析报告...')
}

const viewDetails = (rumor) => {
  ElMessage.info(`查看谣言详情: ${rumor.title}`)
}

const trackSpread = (rumor) => {
  ElMessage.info(`追踪谣言传播: ${rumor.title}`)
}

const createDebunking = (rumor) => {
  ElMessage.info(`生成辟谣内容: ${rumor.title}`)
}

// 初始化传播趋势图表
const initTrendChart = () => {
  if (!trendChart.value) return
  
  trendChartInstance = echarts.init(trendChart.value)
  
  const option = {
    title: {
      text: '谣言传播趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['传播量', '拦截量', '辟谣量'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '传播量',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330, 1320, 1200, 1100, 950, 800, 700],
        smooth: true,
        itemStyle: { color: '#f56c6c' }
      },
      {
        name: '拦截量',
        type: 'line',
        data: [680, 790, 750, 780, 1080, 1120, 1100, 1000, 920, 800, 680, 600],
        smooth: true,
        itemStyle: { color: '#67c23a' }
      },
      {
        name: '辟谣量',
        type: 'line',
        data: [620, 720, 680, 700, 980, 1000, 980, 900, 820, 720, 600, 550],
        smooth: true,
        itemStyle: { color: '#409eff' }
      }
    ]
  }
  
  trendChartInstance.setOption(option)
}

// 初始化网络图
const initNetworkChart = () => {
  if (!networkChart.value) return
  
  networkChartInstance = echarts.init(networkChart.value)
  
  const nodes = [
    { id: 'source', name: '谣言源头', symbolSize: 80, x: 300, y: 300, category: 0 },
    { id: 'platform1', name: '微信群', symbolSize: 60, x: 200, y: 200, category: 1 },
    { id: 'platform2', name: '微博', symbolSize: 70, x: 400, y: 200, category: 1 },
    { id: 'platform3', name: '抖音', symbolSize: 50, x: 350, y: 150, category: 1 },
    { id: 'user1', name: '用户群体A', symbolSize: 40, x: 100, y: 100, category: 2 },
    { id: 'user2', name: '用户群体B', symbolSize: 45, x: 500, y: 100, category: 2 },
    { id: 'user3', name: '用户群体C', symbolSize: 35, x: 450, y: 300, category: 2 }
  ]
  
  const links = [
    { source: 'source', target: 'platform1', value: 10 },
    { source: 'source', target: 'platform2', value: 15 },
    { source: 'source', target: 'platform3', value: 8 },
    { source: 'platform1', target: 'user1', value: 12 },
    { source: 'platform2', target: 'user2', value: 18 },
    { source: 'platform3', target: 'user3', value: 9 }
  ]
  
  const categories = [
    { name: '谣言源头' },
    { name: '传播平台' },
    { name: '用户群体' }
  ]
  
  const option = {
    title: {
      text: '传播路径网络图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    legend: {
      data: categories.map(c => c.name),
      top: 30
    },
    series: [
      {
        name: '传播网络',
        type: 'graph',
        layout: 'none',
        data: nodes,
        links: links,
        categories: categories,
        roam: true,
        focusNodeAdjacency: true,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        },
        lineStyle: {
          color: 'source',
          curveness: 0.3
        },
        emphasis: {
          lineStyle: {
            width: 10
          }
        }
      }
    ]
  }
  
  networkChartInstance.setOption(option)
}

// 初始化地域分布图表
const initRegionDistributionChart = () => {
  if (!regionDistributionChart.value) return
  
  regionDistributionChartInstance = echarts.init(regionDistributionChart.value)
  
  const option = {
    title: {
      text: '谣言传播地域分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '地域分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '华东地区' },
          { value: 310, name: '华北地区' },
          { value: 234, name: '华南地区' },
          { value: 135, name: '西南地区' },
          { value: 148, name: '其他地区' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  regionDistributionChartInstance.setOption(option)
}

// 初始化平台分布图表
const initPlatformChart = () => {
  if (!platformChart.value) return
  
  platformChartInstance = echarts.init(platformChart.value)
  
  const option = {
    title: {
      text: '传播平台分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['微信', '微博', '抖音', '知乎', '贴吧', '其他']
    },
    yAxis: {
      type: 'value',
      name: '传播量'
    },
    series: [
      {
        name: '传播量',
        type: 'bar',
        data: [3200, 2800, 2400, 1800, 1200, 800],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  }
  
  platformChartInstance.setOption(option)
}

// 生命周期
onMounted(() => {
  setTimeout(() => {
    initTrendChart()
    initNetworkChart()
    initRegionDistributionChart()
    initPlatformChart()
  }, 100)
})

onUnmounted(() => {
  if (trendChartInstance) {
    trendChartInstance.dispose()
  }
  if (networkChartInstance) {
    networkChartInstance.dispose()
  }
  if (regionDistributionChartInstance) {
    regionDistributionChartInstance.dispose()
  }
  if (platformChartInstance) {
    platformChartInstance.dispose()
  }
})
</script>

<style scoped>
.rumor-spread-analysis {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.header-info h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.header-info p {
  margin: 0;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.spread-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.overview-card h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.rumor-types {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.type-name {
  width: 80px;
  font-size: 14px;
  color: #333;
}

.type-progress {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

.type-percent {
  width: 40px;
  text-align: right;
  font-size: 14px;
  color: #666;
}

.trend-charts, .region-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-card h3 {
  margin: 0 0 15px 0;
  color: #333;
}

.chart-container {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

.rumor-list {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.list-header h3 {
  margin: 0;
  color: #333;
}

.filter-controls {
  display: flex;
  gap: 10px;
}

.rumor-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rumor-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.rumor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.rumor-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.rumor-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.rumor-status.active {
  background: #fff3cd;
  color: #856404;
}

.rumor-status.contained {
  background: #d4edda;
  color: #155724;
}

.rumor-status.debunked {
  background: #d1ecf1;
  color: #0c5460;
}

.rumor-content {
  margin-bottom: 15px;
}

.rumor-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.rumor-metrics {
  margin-bottom: 15px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.metric-value.risk-high {
  color: #f56c6c;
}

.metric-value.risk-medium {
  color: #e6a23c;
}

.metric-value.risk-low {
  color: #67c23a;
}

.rumor-timeline {
  margin-bottom: 15px;
}

.timeline-item {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.rumor-actions {
  display: flex;
  gap: 10px;
}

.analysis-report {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.report-card h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.report-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.report-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.report-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.report-section ul {
  margin: 0;
  padding-left: 20px;
}

.report-section li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .spread-overview {
    grid-template-columns: 1fr;
  }
  
  .trend-charts, .region-charts {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .metric-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .report-content {
    grid-template-columns: 1fr;
  }
}
</style> 